<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件列表</title>
	<link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
	<script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
	<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
	<div class="layui-container">
		<div class="title-c">文件列表</div>
		<div class="layui-row">
			{% for dir in dir_list %}
			<div class="layui-col-md1 file-box">
				<!--<i class="layui-icon layui-icon-template-1"></i>-->
				<img src="{{url_for('static',filename='icon/folder.svg')}}">
				<p>{{ dir.name }}</p>
			</div>
			{% endfor %}
			{% for file in file_list %}
			<div class="layui-col-md1 file-box">
<!--				<i class="layui-icon layui-icon-file-b"></i>-->
				<img src="{{url_for('static',filename='icon/file.svg')}}" alt="">
				<p>{{ file.name }}</p>
			</div>
			{% endfor %}
		</div>


	</div>

	<script>
        layui.use('layer', function () {
            var layer = layui.layer;
            var $ = layui.$;

            //选择所有class="file-box"下面的i元素逐个判断如果属性data-type=dir则添加class="layui-icon-template-1"样式，如果data-type="file"则添加layui-icon-file-b样式
            // $('.file-box i').each(function () {
            // 	if($(this).attr('data-type') === 'dir'){
            // 		$(this).addClass('layui-icon-template-1');
            // 	}else{
            // 		$(this).addClass('layui-icon-file-b');
            // 	}
            // });


            $('.file-box').click(function () {
                var driver = $(this).text();
                // 打开新页面访问/files路由显示driver内容
                // window.open('/files?dir='+driver);

                // 弹窗显示driver
                // layer.open({
                // 	type: 1,
                // 	title: 'driver',
                // 	content: driver,
                // 	area: ['300px', '200px'],
                // 	btn: ['确定', '取消'],
                // 	yes: function(index, layero){
                // 		//do something
                // 		layer.close(index); //如果设定了yes回调，需进行手工关闭
                // 	}
                // });
            });
        });
	</script>

</body>
</html>